<template>
  <div>
    <div class="card" v-for="(item, index) in data" :key="index">
      <div class="title">{{ item.title }}</div>
      <template v-if="item.type == 'list'">
        <el-descriptions
          direction="vertical"
          :column="3"
          border
          labelClassName="labelClassName"
        >
          <el-descriptions-item
            v-for="(cItem, cIndex) in item.data"
            :label="cItem.name"
            :key="cIndex"
          >
            <template v-if="cItem.type == 'text'">{{ cItem.value }}</template>
            <template v-if="cItem.type == 'img'">
              <el-image
                style="height: 100px"
                :src="cItem.value.split(',')[0]"
                :preview-src-list="cItem.value.split(',')"
              ></el-image>
            </template>
            <template v-if="cItem.type == 'file'">
              <el-table :data="cItem.value">
                <el-table-column prop="name" label="名称">
                  <template slot-scope="scope">
                    <el-tooltip
                      popper-class="ellipsis-tip"
                      :content="scope.row.name"
                      placement="top-start"
                    >
                      <span class="ellipsis">{{ scope.row.name }}</span>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column prop="size" label="大小"></el-table-column>
                <el-table-column
                  prop="content"
                  label="操作"
                  width="60px"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-link
                      type="primary"
                      :underline="false"
                      @click="downloadFile(scope.row)"
                      >下载</el-link
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <template v-if="item.type == 'approve'">
        <el-table
          :data="item.data"
          :header-cell-style="{ background: '#F6F7F9' }"
        >
          <el-table-column prop="title" label="节点名称"> </el-table-column>
          <el-table-column prop="taskUserName" label="处理人">
          </el-table-column>
          <el-table-column label="处理结果">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">正在执行中</span>
              <span v-if="scope.row.status == 1">通过</span>
              <span v-if="scope.row.status == 2">驳回</span>
            </template>
          </el-table-column>
          <el-table-column prop="auditNote" label="处理意见">
            <template slot-scope="scope">
              <el-tooltip
                popper-class="ellipsis-tip"
                :content="scope.row.auditNote"
                placement="top-start"
              >
                <span class="ellipsis">{{ scope.row.auditNote }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="处理时间">
          </el-table-column>
          <el-table-column label="附件" width="50px" align="center">
            <template slot-scope="scope">
              <el-link
                type="primary"
                :underline="false"
                @click="view(scope.row)"
                >查看</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-if="item.type == 'table'">
        <div class="card-table" v-html="item.data"></div>
      </template>
      <template v-if="item.type == 'html'">
        <div class="wrap-html" v-html="item.data"></div>
      </template>
    </div>
    <file-preview :visible="isLook" :data="lookData" @close="isLook = false" />
  </div>
</template>

<script>
import filePreview from '@c/filePreview.vue'
export default {
  components: { filePreview },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      lookData: [],
      isLook: false,
    }
  },
  methods: {
    downloadFile(item) {
      //下载附件
      const a = document.createElement('a')
      a.download = item.name
      a.href = item.fileDomain + item.url
      a.click()
    },
    view(item) {
      //查看
      this.lookData = item.auditFile
      this.isLook = true
    },
  },
}
</script>
<style lang="scss" scoped>
.card {
  padding-bottom: 20px;
  .title {
    color: #45ab49;
    border-bottom: 1px solid #45ab49;
    padding: 10px 0;
    margin-bottom: 15px;
  }
  ::v-deep .labelClassName {
    width: 33% !important;
  }
  ::v-deep .card-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    th,
    td {
      padding: 14px 10px;
      border: 1px solid #ebeef5;
      text-align: center;
    }
    th {
      color: #909399;
    }
    td {
      color: #606266;
    }
  }
}
</style>
